<template>
	<view class="home">
			<!-- 头部定位搜索 -->
			<view class="deom1">
				<view class="jps"><image src="./img/DingWwei.png" style="padding-right: 10rpx;"/>贵阳市</view>
				<view class="search"><image src="./img/Search.png" /><input placeholder="搜索栏"/></view>
				<view><image src="./img/1.png"/></view>
			</view>
			
			<!--导航条-->
			<view class="deom2bg">
				<view class="deom2">
					<navigator>首页</navigator>
					<navigator>便民服务</navigator>
					<navigator>活动</navigator>
				</view>
			</view>
			
			<!-- 图片轮播 -->
			<swiper class="index-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item>
					<navigator><image src="http://qiniu.chenyp.top/tinumb/show/showlife-01.jpg" ></image></navigator>
				</swiper-item>
				<swiper-item>
					<navigator><image src="http://qiniu.chenyp.top/tinumb/show/showlife-02.jpg"  ></image></navigator>
				</swiper-item>
				<swiper-item>
					<navigator><image src="./img/5.jpg"></image></navigator>
				</swiper-item>
			</swiper>
			
			
			<!-- 九个地州市 -->
			<view class="deom4">
					<navigator>
						<image src="./img/5.jpg" />
						<view>安顺市</view>
					</navigator>
					<navigator>
						<image src="./img/5.jpg" />
						<view>毕节市</view>
					</navigator>
					<navigator>
						<image src="./img/5.jpg" />
						<view>贵阳市</view>
					</navigator>
					<navigator>
						<image src="./img/5.jpg" />
						<view>六盘水市</view>
					</navigator>
					<navigator>
						<image src="./img/5.jpg" />
						<view>黔东南州</view>
					</navigator>
					<navigator>
						<image src="./img/5.jpg" />
						<view>黔西南州</view>
					</navigator>
					<navigator>
						<image src="./img/5.jpg" />
						<view>黔南州</view>
					</navigator>
					<navigator>
						<image src="./img/5.jpg" />
						<view>铜仁市</view>
					</navigator>
					<navigator>
						<image src="./img/5.jpg" />
						<view>遵义市</view>
					</navigator>
			</view>
			  
			<!--热门榜单-->
			<view class="deom5">
				<view class="hot_list">
					<view class="listitle">热门榜单</view>
					<view class="more">更多<image src="./img/more.png"/></view>
				</view>
				<view class="hot_content">
					<navigator url="../components/culturalchildren" open-type="navigate">
						<image src="./img/5.jpg"/>
						<view>文化</view>
					</navigator>
					
					
					<navigator url="pages/video/video">
						<image src="./img/5.jpg"/>
						<view>旅游</view>
					</navigator>
					
					
					<navigator>
						<image src="./img/5.jpg"/>
						<view>产业</view>
					</navigator>
				</view>
				
			</view>
			    	
			 
			<!--热点咨询-->
			<view class="deom6bj">
				<view class="deom6">
				<view class="deom6_title">热点咨询</view>
				<view class="deom6_whole">
					<navigator>
						<view>
							<view class="deom6_count">景点假期攻略来啦！景点假期攻略 来啦！景点假期攻略来啦！</view>
							<view class="deom6_time"><view>贵州政府</view><view>2021/5/10</view></view>
						</view>
						<image src="./img/5.jpg"/>
					</navigator>
					<navigator>
						<view>
							<view class="deom6_count">xxxxxxxxxxxxxxxxxxxxxxxx</view>
							<view class="deom6_time"><view>今日热点</view><view>2021-5-10</view></view>
						</view>
						<image src="./img/5.jpg"/>
					</navigator>
					<navigator>
						<view>
							<view class="deom6_count">xxxxxxxxxxxxxxxxxxxxxxxx</view>
							<view class="deom6_time"><view>今日热点</view><view>2021-5-10</view></view>
						</view>
						<image src="./img/5.jpg"/>
					</navigator>
					<navigator>
						<view>
							<view class="deom6_count">xxxxxxxxxxxxxxxxxxxxxxxx</view>
							<view class="deom6_time"><view>今日热点</view><view>2021-5-10</view></view>
						</view>
						<image src="./img/5.jpg"/>
					</navigator>
				</view>
			</view>
			</view>    		
	</view>
</template>


<script>
	export default{
		name:"home",
		components:{},
		data(){
			return{
				
			}
		},
		methods:{
			//获取图片轮播的数据
			swiper(){
				uni.request({
					url:'api/guanggao/getListGuangGao?currPage=1&size=10',
					success: (res) => {
						console.log('get成功');
						console.log(res);
					},
					fail:(res)=>{
						console.log('get失败');
						console.log(res);
					}
				})
			}
		},
		created() {
			this.swiper();
		}
	}
</script>

<style scoped>
	/* 头部定位搜索 */
	.deom1{
		display: flex;
		justify-content: space-around;
		background-color: #558EE7;
		width: 100%;
		height: 42px;
		line-height: 42px;
		position: fixed;
		top: 44px;
		z-index: 100;
	}
	.deom1 view{
		font-size: 12px;
	}
	 .deom1 image{
		width: 13px;
		height: 15px;
	}
	.deom1 .jps{
		display: flex;
		align-items: center;
	}
	
	.search{
		position: relative;
		top: 4px;
	}
	.search image{
		position: relative;
		left: 10px;
		z-index: 10;
	}
	.deom1 input{
		width: 225px;
		height: 25px;
		background: #70a0eb;
		border-radius:15px ;
		display: inline-block;
		position: relative;
		top: 10rpx;
		left: -8px;
		padding-left: 30px;
	}
	
	/*导航条*/
	.deom2bg{
		width: 100%;
		background: #558EE7;
		margin-top: 40px;
		
	}
	
	.deom2{
		width: 90%;
		margin: 0 auto;
		height: 50px;
		background: #558EE7;
		line-height:50px;
	}
	.deom2 navigator{
		color: #333638;
		font-size: 14px;
		display: inline-block;
		margin-right: 20rpx;
	}
	.deom2 navigator:hover{
		color:#FFFFFF;
		font-size: 20px;
	}
	
	
	/* 图片轮播 */
	.index-swiper{
		width:100%;
		background-color: #558EE7;
		padding-bottom: 10px;
	}
	.index-swiper navigator{
		width: 90%;
		margin: auto;
	}
	.index-swiper image{
		width: 100%;
		height: 150px;
		border-radius: 10px;
	}
	
	/*九个地州市*/
	.deom4{
		width: 90%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 20px;
		text-align: center;
	}
	.deom4 navigator{
		width: 30%;
		height: 70px;
	}
	.deom4  image{
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}
	.deom4 navigator view{
		display: block;
		font-size: 10px;
		color: #333638;
	}
	
	/*热门榜单*/
	.deom5{
		width: 90%;
		margin: 0 auto;
	}
	.deom5 .hot_list{
		display: flex;
		justify-content: space-between;
		margin: 20px 0px;
	}
	.listitle{
		font-size: 19px;
		color: #333333;
	}
	.more{
		font-size: 12px;
		color: #a3a3a3;
	}
	.hot_list image{
		width: 9px;
		height: 10px;
		margin-left: 6px;
	}
	.deom5 .hot_content{
		display: flex;
		justify-content: space-between;
	}
	.deom5 .hot_content>navigator{
		width: 30%;
		height: 135px;
		position:relative;
	}
	.deom5 .hot_content navigator view{
		text-align: center;
		position: absolute;
		top:35%;
		left: 35%;
		z-index: 2;
		color: #ffffff;
	}
	.deom5 .hot_content image{
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	/*热点咨询*/
	.deom6bj{
		width: 100%;
		background: linear-gradient(#f2f2f2, #ffffff);
		
	}
	.deom6{
		width: 90%;
		margin: 0 auto;
	}
	.deom6 .deom6_title{
		margin: 20px 0px 10px 0px;
		padding-top: 10px;
		font-size: 19px;
		color: #333333;
	}
	.deom6 .deom6_whole>navigator{
		display: flex;
		justify-content: space-between;
		margin-bottom: 25px;
		height: 70px;
	}
	.deom6 .deom6_whole>navigator>view{
		width: 55%;
		display: flex;
		align-content:space-between;
		flex-wrap: wrap;
	}
	.deom6 .deom6_whole>navigator image{
		width: 30%;
		height: 70px;
	}
	.deom6 .deom6_whole .deom6_time{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items:center;
	}
	.deom6 .deom6_whole .deom6_time view{
		color: #A4A4A4;
		font-size: 8px;
	}
	
	.deom6 .deom6_whole .deom6_count{
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		white-space: normal !important;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 14px;
		color: #161616;
	}

</style>
